哎哎哎:# t0]https://www . geeksforgeeks . org/angolajs-guidelines/

指令是文档对象模型中的标记。指令可以与任何控制器或 HTML 标记一起使用，这些标记将告诉编译器预期的确切操作或行为。存在一些预定义的指令，但是如果开发人员需要，他可以创建新的指令(自定义指令)。

下表列出了重要的内置 AngularJS 指令。

| 指令 | 描述 |
| ng 应用程序 | AngularJS 应用程序的开始。 |
| k-init | 用于初始化变量 |
| ng 模型 | ng-model 用于绑定到 HTML 控件 |
| ng-控制器 | 将控制器附着到视图 |
| 我的天啊 | 将该值与 HTML 元素绑定 |
| ng 重复 | 对指定集合中的每个项目重复一次 HTML 模板。 |
| ng 显示 | 显示或隐藏关联的 HTML 元素 |
| ng-只读 | 将 HTML 元素设为只读 |
| ng-禁用 | 用于动态禁用或启用按钮 |
| ng-if | 移除或重新创建 HTML 元素 |
| ng 点击 | 点击自定义步骤 |

1. ng-app: The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS Application.
   Example: This example uses ng-app Directive to define a default AngularJS application.

   ```ts
    

    
       AngularJS ng-app Directive 

    
        
    

    
   

   ng-app directive

    
   
    
           

   {{ name }} is the portal for geeks.

    
       
    
    

    
   ```

   输出:
   




2. ng-init:
   The ng-init directive is used to initialize an AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables.
   The ng-init directive defines initial values and variables for an AngularJS application.
   Example: In this example, we initialize an array of string.

   ts
 
     
 
    ng-cOntroller="myController"> 
    

   Input Box-

    
       
    
           

    
               Name- 
                               ng-model="name"> 
               

    {{ name }} 

   Checkbox- 
                               ng-model="check"> 
               

    {{ check }} 

   Radiobox- 
                               ng-model="choice"> 
               

    {{ choice }} 

   Number- 
                               ng-model="num"> 
               

    {{ num }} 

   Email- 
                               ng-model="mail"> 
               

    {{ mail }} 

   Url- 
                               ng-model="url"> 
               

    {{ url }} 

    
           

    
           

    
               Date: 
                
               

    Todays date:{{ date1+1 }}

   Datetime-local- 
                
               

    {{ date2+1 }} 

   Time- 
                
               

    {{ time1+1 }} 

   Month- 
                
               

    {{ mon+1 }} 

   Week- 
                
               

    {{ we+1 }} 

    
           

    
       
    
    
    
    
   

   输出:
   

   
   

   1. ng-controller:
      The ng-controller Directive in AngularJS is used to add controller to the application. It can be used to add methods, functions and variables that can be called on some event like click, etc to perform certain action.
      Example:

      ```ts
       
       

       
          ng-controller Directive 

       
           
       

       
      

      GeeksforGeeks 
          

      ng-controller Directive

      
       
      
       
              Name:  
              
      
       

      You entered: {{name}} 
          

       

       
              var app = angular.module('app', []); 
              app.controller('geek', function ($scope) { 
                  $scope.name = "geeksforgeeks"; 
              }); 
           
       

       
      ```

      输出:
      

   
   

   2. ng-bind:
      The ng-bind directive in AngularJS is used to bind/replace the text content of any particular HTML element with the value that is entered in the given expression. The value of specified HTML content updates whenever the value of the expression changes in ng-bind directive.

      ```ts
       
       

       
          ng-checked Directive 

       
           
       

       
      

      GeeksforGeeks 
          

      ng-bind Directive

               
      
       
              num1:  
              
      
       

      num2:  
              
      
       

      Product:  
          

       

       
              var app = angular.module("gfg", []); 
              app.controller('app', ['$scope', function ($app) { 
                  $app.num1 = 1; 
                  $app.num2 = 1; 
                  $app.product = function () { 
                      $app.result = ($app.num1 * $app.num2); 
                  } 
              }]); 
           
       

       
      ```

   
   

   3. ng-repeat:
      Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for a number of times or once per item in a collection of items. ng-repeat is mostly used on arrays and objects.
      ng-repeat is similar to a loop that we have in C, C++ or other languages but technically it instantiates a template(normally a set of HTML structures) for each element in a collection that we are accessing. Angular maintains a $index variable as a key to the element which is currently being accessed and the user can also access this variable.

      示例:

      
      

      1. Create an app.js file for the app.

         ```ts
         var app = angular.module('myApp',[]); 

         app.controller('MainCtrl', function($scope){ 
             $scope.names = ['Adam','Steve','George','James','Armin']; 
             console.log($scope.names); 
         }); 
         ```

         第 1 行- 创建了一个名为“myApp”的应用模块，没有依赖关系。
         3 号线- 主控制器供我们应用。
         第 4 行- 字符串“名称”数组。

      
      

      2. Create index.html page

         ts
 
 
 
     
     
     
     
 
 
    

         Here is the name list

          
             
          
                 
         •  
                       {{name}} 
                   
          
             
          
          
         

         第 5 行- 包含所有依赖项，如 jquery、angular-js 和 app.js 文件
         第 12 行- 使用 ng-repeat 指令一次从 names 数组中获取一个名称并显示。
         输出:
         

      
      
      
      
   
   

   4. ng-show:
      The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements.
      Example 1: This example uses ng-show Directive to display the HTML element after checked the checkbox.

      ```ts
       
       

       
          ng-show Directive 

       
           
       

       
          
       
      

      GeeksforGeeks 
              

      ng-show Directive

       

       

       
                  Show Paragraph 
               

       
                  Show this paragraph using ng-show 
              

       
          
       

       
              var myapp = angular.module("app", []); 
              myapp.controller("geek", function ($scope) { 
                  $scope.show = false; 
              }); 
           
       

                           
      ```

      输出:
      之前勾选了复选框:
      
      之后勾选了复选框:
      

      
      
      • ng-readonly:
        The ng-readonly Directive in AngularJS is used to specify the readonly attribute of an HTML element. The HTML element will be readonly only if the expression inside ng-readonly directive returns true.
        Example: This example uses ng-readonly Directive to enable readonly property.
      
      

      ```ts
       
       
          

       
              ng-readonly Directive 

       
               
           

       
              

      GeeksforGeeks 
              

      ng-readonly Directive

       
      
       
                  Check to make month readonly:  

      
      
       

      Input Month: 
              

       
           
                           
      ```

      输出:
      之前勾选了复选框:
      
      之后勾选了复选框:
      

      
      
      • ng-disabled:
        The ng-disabled Directive in AngularJS is used to enable or disable HTML elements. If the expression inside the ng-disabled attribute returns true then the form field will be disabled or vice versa. It is usually applied on form field (input, select, button, etc).
        Example 1: This example uses ng-disabled Directive to disable the button.
      
      

      ```ts
       
       

       
          ng-disabled Directive 

       
           
       

       
      

      GeeksforGeeks 
      

      ng-disabled Directive

       
      
       
               
                  Click to Disable 
               

       
                  Click to Enable 
               
          

       

       
              var app = angular.module("app", []); 
              app.controller('app', ['$scope', function ($app) { 
                  $app.geek = function (disable) { 
                      $app.disable = !disable; 
                  } 
              }]); 
           
       

       
      ```

      输出:
      点击按钮前:
      
      点击按钮后:
      

      
      
      • ng-if:
        The ng-if Directive in AngularJS is used to remove or recreate a portion of HTML element based on an expression. The ng-if is different from ng-hide because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it is false then the element is removed and if it is true then the element is added to the DOM.
        Example: This example changes the content after clicking the button.
      
      

      ```ts
       
       

       
          ng-hide Directive 

       
           
       

       
      

       
              GeeksforGeeks 
           
      

      ng-if Directive

       
      
       
              

       
                   

      Click to Sign in

       
              

       
      

       
                   
                      Sign out 
                   

       
                      GeeksforGeeks is the computer 
                      science portal for geeks. 
                  

       
              

       
          
       

       
              var app = angular.module("geek", []); 
              app.controller('app', ['$scope', function ($scope) { 
                  var vm = this; 
              }]); 
           
       

       
      ```

      输出:
      点击按钮前:
      
      点击按钮后:
      

      
      
      • ng-click:
        The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can popup alert when button is clicked.
        Example: This example uses ng-click Directive to display an alert message after clicking the element.
      
      

      ```ts
       
       

       
          ng-click Directive 

       
           
       

       
      

      GeeksforGeeks 
          

      ng-click Directive

       
      
       
               
                   
                      Click Here 
                   
               
          
       

       
              var app = angular.module("geek", []); 
              app.controller('app', ['$scope', function ($app) { 
                  $app.alert = function () { 
                      alert("This is an example of ng-click"); 
                  } 
              }]); 
           
       

       
      ```

      输出:
      点击按钮前:
      
      点击按钮后: